<script>
import { reactive } from "vue";
import orderItem from "../components/orderItem.vue";
import { public_status } from "../store/public_status";
import { useStore } from "../store/index";
import { useRouter } from "vue-router";
export default {
  components: {
    orderItem,
  },
  setup() {
    let data = reactive({
      active: 0,
    });

    let router = useRouter();

    // # 底部导航栏显示隐藏 购物车高度
    public_status().display = false;

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId]; // # 当前用户
    let userOrder = userData.order; // # 用户订单

    console.log(userOrder);

    return {
      data,
      userOrder,
      router,
    };
  },
};
</script>

<template>
  <div class="myOrderView">
    <!-- 头部 -->
    <header class="header">
      <router-link to="/my" class="back">
        <i class="iconfont icon-arrow-left"></i>
      </router-link>
      <div class="title">我的订单</div>
      <div class="btn">管理</div>
    </header>
    <!-- 头部 -->

    <!-- 内容 -->
    <nav>
      <van-tabs v-model:active="data.active" sticky animated offset-top="56">
        <van-tab title="全部订单">
          <orderItem
            v-for="item in userOrder"
            :key="item.orderId"
            :order="item"
          />
        </van-tab>

        <van-tab title="待付款">
          <orderItem
            v-for="item in userOrder"
            :key="item.orderId"
            v-show="item.order_state == '待付款'"
            :order="item"
          />
        </van-tab>

        <van-tab title="待发货">
          <orderItem
            v-for="item in userOrder"
            :key="item.orderId"
            v-show="item.order_state == '待发货'"
            :order="item"
          />
        </van-tab>

        <van-tab title="待收货">
          <orderItem
            v-for="item in userOrder"
            :key="item.orderId"
            v-show="item.order_state == '待收货'"
            :order="item"
          />
        </van-tab>
      </van-tabs>
    </nav>
    <!-- 内容 -->
  </div>
</template>

<style lang="scss" scoped>
.myOrderView {
  > header.header {
    height: 56px;
    line-height: 56px;
    text-align: center;

    background: #fff;

    position: sticky;
    top: 0;
    z-index: 10;

    > .back {
      position: absolute;
      left: 15px;
      top: 0;
      bottom: 0;
      margin: auto;

      width: 37px;
      height: 37px;
      line-height: 37px;
      border-radius: 50%;
      background: #f9f9f9;

      > i {
        text-align: center;
      }
    }

    > .title {
      font-size: 18px;
      font-weight: bold;
    }

    > .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 15px;
      margin: auto;

      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      text-align: center;

      border-radius: 15px;
      background: #f9f9f9;
    }
  }

  > nav::v-deep {
    // $ 修改导航栏样式
    .van-sticky {
      background: #fff;
    }

    .van-tabs__nav {
      width: max-content;
      background: #fff;
      padding-left: 15px;
      align-items: center;

      .van-tabs__line {
        display: none;
      }

      .van-tab {
        height: 26px;
        line-height: 26px;
        padding: 0;
        width: max-content;
        flex: unset;

        &.van-tab--active span {
          background: #1f1f1f;
          color: #fff;
        }

        span {
          font-size: 12px;
          border-radius: 10px;
          padding: 0 18px;
          font-weight: bold;
        }
      }
    }

    // $ 内容区域
    .van-tabs__content {
      padding: 0 15px;
    }
  }
}
</style>